<template>
	<view class="exception">
		<!-- 正常的网页内容 -->
		<slot></slot>
		<uni-popup ref="errorPopup" type="center">
			<view class="error">
				<uni-icons type="paperplane" size="48" color="#d8d8d8"></uni-icons>
				<view class="error-desc">服务端出错啦, 请联系管理员</view>
				<view class="error-info">出错接口: {{requestErrorInfo.method}} {{requestErrorInfo.url}} {{requestErrorCode}} 
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	/**
	 * 自定义异常组件，主要用来处理服务端500/404等状态
	 */
	import {
		mapState
	} from 'vuex'
	export default {
		name: "exception",
		data() {
			return {

			};
		},
		computed: {
			...mapState('exception', {
				requestErrorCode: state => state.requestErrorCode,
				requestErrorInfo: state => state.requestErrorInfo
			}),
		},

	watch: {
		requestErrorCode() {
			console.log(this.requestErrorInfo)
			console.log(this.requestErrorCode)
			if([500, 404].indexOf(this.requestErrorCode) != -1){
				this.$refs.errorPopup.open()
			}
		}
	},

		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.error {
		width:80%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		
		
		.error-desc{
			padding-top: 20rpx;
			color: #808080;
		}
		
		.error-info{
			color: red;
			padding: 20rpx 0;
			@include textAlign;
		}
		
		.error-btn{
			width: 200rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background-color: #007AFF;
			color: #fff;
		}
	}
</style>
